import React, { useState, useContext, memo } from 'react';

const countCtx = React.createContext<number>(0);
const updateCtx = React.createContext<
	React.Dispatch<React.SetStateAction<number>>
>(() => { });
const App = () => {
	const [count, setCount] = useState(0);
	return (
		<div>
			<countCtx.Provider value={count}>
				<updateCtx.Provider value={setCount}>
					<Middle />
				</updateCtx.Provider>
			</countCtx.Provider>
		</div>
	);
};
const Middle = memo(() => (
	<>
		<Father />
		<Button />
	</>
));

function Button() {
	console.log('button is rendered');
	const setCount = useContext(updateCtx);
	return (
		<button
			className="p-2 text-white bg-red-400 border-red-400 border-solid rounded-md border-1"
			onClick={() => setCount(Math.random())}
		>
			increase
		</button>
	);
}

function Father() {
	console.log('father is rendered');
	return (
		<div>
			<div>this is the father</div>
			<Child />
		</div>
	);
}
function Child() {
	console.log('child is rendered');
	const count = useContext(countCtx);
	return <div className="text-xl text-blue-700 ">the count is :{count}</div>;
}

export default App;